<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .template{
            display: none;
        }
    </style>
</head>
<body>
     <!-- 头部 -->
     <div class="header">
        <div class="warp">
            <a href="#"><span class="logo"></span></a>
            <div class="nav">
                <ul class="nav-menu">
                    <li><a href="#" class="a-one">真我Q2 Pro</a> </li>
                    <li class="">
                        <a href="#" class="a-one xianshi">手机</a>
                        <div class="nav-submenu">
                            <div class="nav-submenu-warp ">
                                <ul class="phone-list">
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone1.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone2.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone3.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone4.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone5.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img">
                                                <p class="tile">
                                                    新品
                                                </p>
                                                <img src="img/phone6.png" alt="">
                                            </div>
                                            <div class="phone-list-info">       
                                                <span>真我Q2 Pro</span>   
                                                <span class="phone-list-price">
                                                    ￥1999
                                                    <i>起</i>
                                                </span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="phone-list-img" style="margin-top: 45px;">
                                                <img src="img/phone7.png" alt="">
                                                <span style="font-size: 16px;">更多</span>
                                            </div>     
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#" class="a-one xianshi">配件</a></li>
                    <li><a href="#" class="a-one">品牌</a></li>
                    <li><a href="#" class="a-one">服务</a></li>
                    <li><a href="#" class="a-one">社区</a></li>
                    <li><a href="#" class="a-one">APP</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <a href="#"><span class="person"></span></a>
            </div>
        </div>
    </div>
     <!-- 个人信息 -->
     <div class="personal">
        <ul>
            <li><a href="shopcar.html" id="gouwuche">购物车</a> </li>
            <li><a href="order.html" id="dingdan">我的订单</a></li>
            <li><a href="login.html" id="denglu">登录</a></li>
        </ul>
    </div>
    <div class="mask">
    </div>
    <!-- 列表 -->
    <div class="realme-phones">
        <div class="realme-phones-banner">
            <img src="img/realmephonebanner.jpg" alt="">
        </div>
        <div class="realme-phones-tabs">
            <div class="wrapper">
                <ul>
                    <li>全部商品</li>
                    <li>手机</li>
                    <li>配节&周边</li>
                </ul>
            </div>
        </div>  
    </div>

    <div class="realme-phones-group">
        <h2 class="realme-phones-title">手机</h2>
        <div class="realme-phones-list" id="phones">
            <ul>
                <li class="template">
                    <a href="details.html">
                        <div class="realme-phones-image">
                            <img src="" alt="">
                        </div>
                        <div class="realme-phones-name">
                            <p></p>
                        </div>
                        <div class="realme-phones-price">
                            <p></p>
                        </div>
                        <div class="realme-phones-colors"> 
                            <span style="background: linear-gradient(309deg,rgba(89,133,235,1) 0%,rgba(226,161,189,1) 54%,rgba(247,236,161,1) 100%);" ></span>
                            <span style="background: linear-gradient(143deg,rgba(239,238,241,1) 0%,rgba(213,212,219,1) 58%,rgba(203,203,211,1) 100%);"></span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
   

     <!-- footer -->
     <div class="footer">
        <a href="#" class="footer-services">
            <div class="footer-warp">
                <div class="footer-service">
                    <span class="icon icon-s-7tian"></span>
                    <span>7天无理由退货</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-huanhuo"></span>
                    <span>手机30天换货保障</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-baoyou"></span>
                    <span>满79元包邮</span>
                </div>
                <div class="footer-service">
                    <span class="icon icon-s-zhengpin"></span>
                    <span>正品保障</span>
                </div>
            </div>
        </a>
        <div class="footer-center">
            <div class="footer-menus">
                <div class="wrapper">
                    <div class="footer-menu">
                      <div class="footer-menu-title">推荐产品<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x7-pro" title="真我 X7 Pro 5G" target="_self">真我 X7 Pro 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x7" title="真我 X7 5G" target="_self">真我 X7 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-v3" title="真我 V3 5G" target="_self">真我 V3 5G</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/cn/realme-v5" title="真我 V5 5G " target="_self">真我 V5 5G </a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/realme-x50-pro-play" title="真我 X50 Pro 玩家版" target="_self">真我 X50 Pro 玩家版</a>
                        </li>
                        
                      </ul>
                    </div>
                     
                    <div class="footer-menu">
                      <div class="footer-menu-title">服务支持<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/legal/delivery-terms" title="配送方式" target="_self">配送方式</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/legal/warranty-terms" title="服务政策" target="_self">服务政策</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/support/faq" title="常见问题" target="_self">常见问题</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/support/troubleshooting" title="故障排除" target="_self">故障排除</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/presoftware" title="预装应用公示" target="_self">预装应用公示</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://buy.realme.com/cn/rpass-check" title="R码通道" target="_self">R码通道</a>
                        </li>
                        
                      </ul>
                    </div>
            
                    <div class="footer-menu">
                      <div class="footer-menu-title">关于我们<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realme.com/brand" title="关于realme" target="_self">关于realme</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.coloros.com/index.html" title="ColorOS官网" target="_blank">ColorOS官网</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://www.realmebbs.com/" title="realme社区" target="_blank">realme社区</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="https://career.realme.com/" title="加入我们" target="_self">加入我们</a>
                        </li>
                        
                      </ul>
                    </div>
                
                    <div class="footer-menu">
                      <div class="footer-menu-title">联系我们<span class="icon icon-plus"></span></div>
                      <ul class="footer-menu-list">
                        
                        <li style="white-space: nowrap;">
                          <a href="mailto:pr@realme.com" title="pr@realme.com" target="_self">pr@realme.com</a>
                        </li>
                        
                        <li style="white-space: nowrap;">
                          <a href="mailto:service.cn@realme.com" title="service.cn@realme.com" target="_self">service.cn@realme.com</a>
                        </li>
                        <li style="white-space: nowrap;">
                          <a href="javascript:void(0)" title="深圳市南山区海德三道航天科技广场B座25楼" target="_self">深圳市南山区海德三道航天科技广场B座25楼</a>
                        </li>
                        
                      </ul>
                    </div>  
                </div>
            </div>
            <div class="footer-contact">
                <div class="footer-contact-phone">400-628-0066</div>
                <div class="footer-contact-time">8:00-20:00，周一至周日</div>
                <div class="footer-contact-online">
                    <span class="icon icon-chat"></span>
                    <p class="kefu">在线客服</p> 
                </div>
                <div class="footer-contact-time">9:00-22:00，周一至周日</div>
                <div class="footer-socials">
                    <a href="">
                        <span class="icon icon-wechat"></span>
                    </a>
                    <a href="">
                        <span class="icon icon-weibo"></span>
                    </a>
                </div>
            </div>

        </div>
        <div class="footer-region"><a href="#">Mainland China ( 简体中文 / CNY )</a></div>
        <div class="footer-bottom">
            <div class="wrapper">
                <div class="copyright">
                  © 2019-2020 realme 版权所有. 渝ICP证20200030号&nbsp;
                  <a href="http://beian.miit.gov.cn/" rel="nofollow">渝ICP备19011033号-1</a><i></i>
                  <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50011202501913" rel="nofollow"><span class="icon icon-emblem"></span>渝公网安备 50011202501913号</a>
                  <!-- <iframe frameborder="0" height="16" width="16" allowtransparency="true" scrolling="no" src="http://wljg.scjgj.cq.gov.cn/ztgsgl/WebMonitor/GUILayer/eImgMana/gshdimg.aspx?sfdm=120200728115828137484"></iframe> -->
                </div>
                <div class="footer-legal">
                  <a href="https://www.realme.com/legal/privacy-policy" title="realme 隐私政策">隐私政策</a>
                  <a href="https://www.realme.com/legal/user-agreement" title="realme 用户协议">用户协议</a>
                  <a href="https://www.realme.com/legal/warranty-terms" title="realme 服务政策">服务政策</a>
                  <a href="https://www.realme.com/legal/ip-policy" title="realme 侵权投诉指引">侵权投诉指引</a>
                </div>
              </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
   
    

    <!-- 获取手机列表数据 -->
    <script>
        $.ajax({
            url:"http://127.0.0.1:82/getPhoneList",
            success(data){
                let Item = $(".template")
                for(let i = 0 ; i < data.length ; i++){
                    let newItem = Item.clone();
                    newItem.css("display","block");
                    $("#phones ul").append(newItem)
                    $(".template a").eq(i+1).attr("href",`details.html?id=${data[i].id}`)
                    $(".template .realme-phones-image img").eq(i+1).attr("src",data[i].img)
                    $(".template .realme-phones-name p").eq(i+1).html(data[i].title)
                    $(".template .realme-phones-price p").eq(i+1).html(data[i].price1)

                }
            }
        })
    </script>
     <!-- 登录状态 -->
     <script>
        let userInfo = sessionStorage.getItem("userInfo");
        if(userInfo){
            $(".personal #denglu").text("退出登录")
            $(".personal #denglu").attr("href","list.html")
            $(".personal #denglu").click(function(){
                sessionStorage.removeItem("userInfo")
                $(".personal #denglu").text("登录")
            })
        }
        $(".personal #gouwuche").click(function(){
                if(!userInfo){
                alert("您还未登录！")
                $(".personal #gouwuche").attr("href","list.html")
            }
        })
        $(".personal #dingdan").click(function(){
                if(!userInfo){
                alert("您还未登录！")
                $(".personal #dingdan").attr("href","list.html")
            }
        })
       
    </script>
     <script src="js/common.js"></script>
</body>
</html>